<template>
  <el-row>
    <el-col class="row-space" :span="5" style="width: 260px" v-for="item in videoInfoList" :key="item.videoId">
      <el-row>
        <el-col :span="22" >
          <el-skeleton style="width: 240px" :loading="loading" animated>
            <template #template>
              <el-row>
                <el-skeleton-item variant="image" style="width: 260px;height: 143px;overflow: hidden" />
              </el-row>
              <div class="desc">
                <el-skeleton-item variant="text" style="margin-right: 16px" />
              </div>
              <div class="sourceInfo" @click="toSpace(item.videoOwnerId)">
                <el-skeleton-item variant="text" style="width: 30%" />
              </div>
            </template>
            <template #default>
              <el-row>
                <el-image style="width: 260px;height: 143px;overflow: hidden" class="image-item" fit="cover" :src="item.videoCover" @click="toDetail(item.videoId)">
                  <template #error>
                    <div class="image-slot">
                      <el-icon><icon-picture /></el-icon>
                    </div>
                  </template>
                </el-image>
              </el-row>
              <div class="desc">
                <el-text class="w-150px mb-2" truncated @click="toDetail(item.videoId)">
                  {{item.videoTitle}}
                </el-text>
              </div>
              <div class="sourceInfo" @click="toSpace(item.videoOwnerId)">
                {{item.videoOwnerNickname}}&nbsp;·&nbsp;&nbsp;{{item.videoPublishTime}}
              </div>
            </template>
          </el-skeleton>

        </el-col>
      </el-row>
    </el-col>


  </el-row>
</template>
<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";




const img1 = ref("/img/recommendVideoList/video01.png")
const videoInfoList1 = ref([
  {
    id:1,
    imgUrl:"/img/recommendVideoList/video01.png",
    desc:"南方姑娘就是水灵～又仙又甜！",
    author:"伢伢gagako",
    upTime:"2-3"
  },{
    id:1,
    imgUrl:"/img/recommendVideoList/video01.png",
    desc:"南方姑娘就是水灵～又仙又甜！",
    author:"伢伢gagako",
    upTime:"2-3"
  },{
    id:1,
    imgUrl:"/img/recommendVideoList/video01.png",
    desc:"南方姑娘就是水灵～又仙又甜！",
    author:"伢伢gagako",
    upTime:"2-3"
  },{
    id:1,
    imgUrl:"/img/recommendVideoList/video01.png",
    desc:"南方姑娘就是水灵～又仙又甜！",
    author:"伢伢gagako",
    upTime:"2-3"
  },{
    id:1,
    imgUrl:"/img/recommendVideoList/video01.png",
    desc:"南方姑娘就是水灵～又仙又甜！",
    author:"伢伢gagako",
    upTime:"2-3"
  },{
    id:1,
    imgUrl:"/img/recommendVideoList/video01.png",
    desc:"南方姑娘就是水灵～又仙又甜！",
    author:"伢伢gagako",
    upTime:"2-3"
  }
])
// const props = defineProps(['videoInfoList'])
const props = defineProps({
  videoInfoList:{
    type:Array,
    default:[]
  },
  loading:{
    type:Boolean,
    default:true,
  }
})

const router = useRouter()
const toDetail = (videoId) => {
  console.log(videoId)
  // router.push({
  //   path: '/video',
  //   query: {
  //     videoId
  //   }
  // })
  window.open("/video/"+videoId+"/","_blank")
}

const toSpace = (id) => {
  // router.push({
  //   // path:"/space/home",
  //   name:'home',
  //   params:{
  //     id
  //   }
  // })
  window.open("/space/home/"+id,"_blank")
}
</script>
<style scoped>
.image-item{
  border-radius: 5px;
}
.desc{
  line-height: 35px;
  height: 35px;
  font-size: 14px;
  color: black;
}
.sourceInfo{
  cursor: pointer;
  color: gray;
  font-size: 12px;
}
.sourceInfo:hover{
  color: #00a1d6;
}

.mb-2{
  color: black;
  cursor: pointer;
}
.mb-2:hover{
  color: #00a1d6;
}
.row-space{
  margin-bottom: 20px;
  box-sizing: border-box;
  //margin-left: 0;
  //padding: 10px;
}
.el-col-5{
  max-width: 19.999999%;
}
</style>

<!-- el-row和el-col是交叉使用的-->